<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VueX</title>
</head>

<body>
    <script src="../Vue.js"></script>
    <!-- <script src="../Vuex.js"></script> -->
    <!-- VueX是什么？ -->
    <!-- Vuex是一个专门为Vue.js应用程序开发的状态管理模式 -->
    <!-- 什么是状态？可以理解为组件中的数据 -->

    <div id="app">
        <button @click="incre">增加</button>
        <!-- 访问Vuex中的数据 -->
        {{$store.state.num}}
        <button @click="decre">减少</button>
    </div>
    <script>
        //声明一个Vuex

        const store = new Vuex.Store({
            // 相当于是data，state提供唯一公用的数据源，所有共享的数据，都要放到state里面存储
            state: {
                num: 0,
            },
            // mutation 专门用于变更state状态的，我们不能直接操作state
            // mutation一般是同步操作
            mutations: {
                // 更改数据的方法
                increa(state, payload) {
                    state.num += payload;
                },
                decrea(state) {
                    state.num--;
                }
            },
            // 用来存放一些异步的操作方法。所以可以进行接口请求
            // 这里的函数一定要经过commit提交请求，通过mutation改数据，因为这样的话数据是会被检测到的
            actions: {
                add(context) {
                    setTimeout(() => {
                        context.commit('increa', 4)
                    })
                },
                sub({ submit }, step) {
                    setTimeout(() => {
                        commit('decrea', step)
                    })
                }
            }
        })
        let vm = new Vue({
            el: '#app',
            store,
            methods: {
                incre() {
                    // 修改Vuex中的数据
                    // 这种方式可以修改，但是不推荐使用，因为状态变更无法被追踪
                    // this.$store.state.num++;
                    // 使用官方推荐的写法，用mutation来操作数据,commit提交一次变更
                    // this.$store.commit('increa');
                    // 触发mutation并且传参
                    this.$store.commit('incre', 3);
                },
                decre() {
                    // this.$store.commit('decrea');
                    // 使用action方式来触发数据更新
                    // 每次减3
                    this.$store.dispatch('sub', 3)
                }
            }
        })
    </script>
</body>

</html>